<template>
	<z-paging ref="paging" v-model="orderCouponList" :refresher-out-rate="0.8" auto-scroll-to-top-when-reload
		:auto-clean-list-when-reload="true" safe-area-inset-bottom bg-color="#fff">
		<view class="enterprise_top">
			<text class="enterprise_bg"></text>
			<u-text text="福鸡信息" size="32rpx" bold />
		</view>
		<view class="coupon">
			<view class="coupon_item">
				<view class="coupon_item_title flex_wrap row_middle">
					<text class="coupon_item_title_orderNumberDisplay">可领取数量：1</text>
					<view class="coupon_item_title_halfCircle left" />
					<view class="coupon_item_title_halfCircle right" />
				</view>
				<view class="coupon_item_content flex_wrap flex_column">
					<view class="flex_wrap row_center-column_center">
						<u--image
							src="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/01/19/403ea030d0d24b2b9abdeda452542f5b.png"
							width="322rpx" height="418rpx"></u--image>
					</view>

				</view>
			</view>
			<u-button :text="receivShow ? '确认领取' : '已领取'" :customStyle="btnStyle" @click="receivShow ? receive() : toCoupon()"></u-button>
		</view>
	</z-paging>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import caches from "@/config/caches.js";
	import {
		chickUrl
	} from "@/config/tendIdConfig.js";
	import {
	    followSalespersonsApi,
	} from "@/api/enterprise.js";
	import {
		encryption
	} from "@/utils/encryption.js";
	export default {
		data() {
			return {
				receivShow:true,
				codeSize: uni.upx2px(472),
				shareCanvasWidth: uni.upx2px(694),
				shareCanvasHeight: uni.upx2px(558),
				currentOrderDetailData: {},
				canvasWidth: 0,
				canvasHeight: 0,
				orderCouponList: [],
				btnStyle: {
					backgroundColor: '#1682FF', //#588BF3
					color: "#fff",
					borderRadius: '8rpx',
				},
				token: '',
				log_id:''
			};
		},
		computed: mapGetters(["userInfo","isLogin","fromshareChickenId"]),
		onLoad(options) {
			console.log(options, "领鸡参数")
			this.log_id  = options.log_id
			let fromshareIds = options.fromshareIds || "";
			if(fromshareIds){
				this.$store.commit('SET_FROMSHARECHICKENID', fromshareIds)
			}
			
			if (!this.isLogin) return uni.navigateTo({ url: "/pages/user/phone/indexApp" })
			this.isLogin &&	this.getChickenToken()
			if (this.isLogin && fromshareIds) {
				console.log('分享鸡关联')
				const params = {
				    salesmanId: this.fromshareChickenId,
				    customerId: this.userInfo.id,
					associatedChannel:20//鸡来源状态
				};
				followSalespersonsApi(params).then((res) => {
				    console.log(res, "关注接口成功");
				});
			}
		},

		methods: {
			getChickenToken() {
				const phone = uni.getStorageSync(caches.PHONE);
				const userName = uni.getStorageSync(caches.USER_INFO)["nickName"] || uni.getStorageSync(caches.USER_INFO)["salesmanName"] || ''
				console.log( userName,'领取人userName>>>')
				uni.request({
					url: chickUrl + "/api/v1/auth/phone-login",
					method: "POST",
					data: {
						...encryption({
							user_phone: phone,
							user_name: userName
						}),
					},
					success: (res) => {
						this.token = res.data.data.token;
					},
					fail: (err) => {
						console.log(err, "22");
					},
				});
			},
			receive() {
				if (!this.isLogin) return uni.navigateTo({ url: "/pages/user/phone/indexApp" })
				const that = this;
				uni.request({
					url: chickUrl + '/api/v1/chick/transfer-into-chick',
					method: "POST",
					header: {
						Authorization: `Bearer ${that.token}`,
					},
					data: {
						log_id: that.log_id
					},
					success(res) {
						if(res.data.errcode == 200){
							uni.$u.toast('领取成功！')
							that.receivShow = false
						}else{
							uni.$u.toast(res.data.errmsg)
						}
					},
				});
			},
			toCoupon(){
				uni.reLaunch({
					url: "/pages/counselling/index"
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	.enterprise_top {
		display: flex;
		height: 44rpx;
		align-items: center;
		padding: 28rpx;
	}

	.enterprise_bg {
		display: block;
		width: 8rpx;
		height: 28rpx;
		background: #588bf3;
		margin-right: 12rpx;
	}

	.toList {
		margin-top: 36rpx;
	}

	.canvas {
		width: 694rpx;
		height: 558rpx;
		position: fixed;
		left: 1000px;
		top: 0;
	}

	.coupon_item_content_num {
		margin-bottom: 112rpx;
		padding: 0 46rpx;
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
	}

	.coupon_item_content_Buttons {
		width: 100%;
		margin-top: 86rpx;
	}

	.coupon {
		padding: 0 28rpx;
		box-sizing: border-box;

		&_item {
			width: 694rpx;
			box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.12);
			border-radius: 12rpx;
			margin-top: 28rpx;

			&_content {
				width: 100%;
				padding: 60rpx;
				box-sizing: border-box;
			}

			&_title {
				padding: 0 40rpx;
				height: 76rpx;
				border-bottom: 1px dashed rgba(51, 51, 51, 0.5);
				position: relative;

				&_orderNumberDisplay {
					font-size: 30rpx;
					color: #333;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				&_orderNumberDisplay.disable {
					text-decoration: line-through;
					color: #999999 !important;
				}

				&_status {
					font-size: 26rpx;
					color: #588bf3;
					font-weight: bold;
				}

				&_status.disable {
					color: #999999 !important;
				}

				&_halfCircle {
					width: 18rpx;
					height: 24rpx;
					background-color: #ededed;
					position: absolute;
				}

				&_halfCircle.left {
					border-top-right-radius: 50px;
					border-bottom-right-radius: 50px;
					left: 0;
					bottom: -12rpx;
				}

				&_halfCircle.right {
					border-top-left-radius: 50px;
					border-bottom-left-radius: 50px;
					right: 0;
					bottom: -12rpx;
				}
			}
		}
	}
</style>